<template>
  <div class="container">
    <h1 style="text-align: center">数组操作演示</h1>

    <div class="description">
      当前操作说明：<span>{{ operationDescription }}</span>
    </div>

    <div class="array-container">
      <div
        v-for="(value, index) in array"
        :key="index"
        class="array-element"
        :ref="el => elements[index] = el"
      >
        {{ value }}
      </div>
    </div>

    <div class="controls">
      <div class="input-group">
        <input type="number" v-model="inputValue" placeholder="值">
        <input type="number" v-model="inputIndex" placeholder="位置">
      </div>
      <button @click="insertElement">插入元素</button>
      <button @click="deleteElement">删除元素</button>
      <button @click="searchElement">查找元素</button>
      <button @click="resetArray">重置数组</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ArrayDemo',
  data() {
    return {
      array: [1, 3, 5, 7, 9],
      operationDescription: '请选择一个操作',
      inputValue: '',
      inputIndex: '',
      elements: []
    }
  },
  methods: {
    async highlightElement(index, color = '#FFC107') {
      if (this.elements[index]) {
        this.elements[index].style.backgroundColor = color
        await new Promise(resolve => setTimeout(resolve, 1000))
        this.elements[index].style.backgroundColor = '#4CAF50'
      }
    },

    async insertElement() {
      const value = parseInt(this.inputValue)
      const index = parseInt(this.inputIndex)

      if (isNaN(value) || isNaN(index) || index < 0 || index > this.array.length) {
        this.operationDescription = '请输入有效的值和位置！'
        return
      }

      this.operationDescription = `正在将 ${value} 插入到位置 ${index}`
      
      this.array.splice(index, 0, value)
      await this.$nextTick()
      await this.highlightElement(index, '#4CAF50')
    },

    async deleteElement() {
      const index = parseInt(this.inputIndex)

      if (isNaN(index) || index < 0 || index >= this.array.length) {
        this.operationDescription = '请输入有效的位置！'
        return
      }

      this.operationDescription = `正在删除位置 ${index} 的元素`
      await this.highlightElement(index, '#F44336')
      
      this.array.splice(index, 1)
    },

    async searchElement() {
      const value = parseInt(this.inputValue)

      if (isNaN(value)) {
        this.operationDescription = '请输入要查找的值！'
        return
      }

      this.operationDescription = `正在查找元素 ${value}`

      for (let i = 0; i < this.array.length; i++) {
        await this.highlightElement(i)
        if (this.array[i] === value) {
          this.operationDescription = `找到元素 ${value} 在位置 ${i}`
          return
        }
      }
      this.operationDescription = `未找到元素 ${value}`
    },

    resetArray() {
      this.array = [1, 3, 5, 7, 9]
      this.operationDescription = '数组已重置'
    }
  }
}
</script>

<style scoped>
.container {
  max-width: 1000px;
  margin: 0 auto;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.array-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  gap: 5px;
}

.array-element {
  width: 50px;
  height: 50px;
  background: #4CAF50;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.controls {
  display: flex;
  gap: 10px;
  margin: 20px 0;
  flex-wrap: wrap;
  justify-content: center;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background: #2196F3;
  color: white;
  cursor: pointer;
  transition: background 0.3s;
}

button:hover {
  background: #1976D2;
}

.input-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  width: 60px;
}

.description {
  text-align: center;
  margin: 20px 0;
  padding: 10px;
  background: #E3F2FD;
  border-radius: 5px;
}
</style>